<template>
    <header>
        <div class="topOne">
            <img src="https://course.myhope365.com/img/logo-text.321d0dc2.png" alt="">
        </div>
        <div class="topTwo">
            <div class="header-container">
                <div class="header-nav">
                    <ul>
                        <li>
                            <a href="#">首页</a>
                        </li>
                        <li>
                            <a href="#" class="dropdown-trigger">课程分类
                                <i style="width: 10px;height: 10px;font-size: 12px">
                                    <svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg>
                                </i>
                            </a>
                            <ul role="menu" tabindex="0" class="ant-dropdown-menu ant-dropdown-menu-vertical ant-dropdown-menu-root ant-dropdown-menu-light ant-dropdown-content">
                                <li 
                                    v-for="course in allCourses" 
                                    :key="course.courseId"
                                    role="menuitem" 
                                    class="ant-dropdown-menu-item"
                                    @click="goToSearch(course.courseId)"
                                >
                                    <a href="#" style="color: rgba(0, 0, 0, .65);">{{ course.courseTitle }}</a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <a href="#">教学管理云平台</a>
                        </li>
                    </ul>
                </div>
                <div class="search">
                    <input placeholder="搜索课程~" type="text" style="color: #9f9f9f; outline: none;">
                    <div class="bigButton">
                        <button @click="handleSearchClick">
                            <img src="" alt="">
                        </button>
                    </div>
                </div>
                <div class="login-container">
                    <div class="login-box">
                        <div class="white-box">
                            <span class="ant-badge">
                                <img 
                                    src="" 
                                    alt="" 
                                    @click="goToCart"
                                >
                                <sup v-if="!$store.state.login && cartIds.length > 0" style="color: red; position: absolute; top: 5px; right: -5px;font-size: 16px;font-weight: bold;">{{ cartIds.length }}</sup>
                            </span>
                        </div>
                        <div class="user-avatar">
                            <div class="open-minded">开通VIP免费观看全站视频</div>
                            <LoginView></LoginView>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>
  </template>
  
  <script>
  import LoginView from '@/components/LoginView.vue'
  import { mapState } from 'vuex'
  
  export default {
    name: 'HeadView',
    data() {
        return {
            allCourses: []
        }
    },
    components: {
      LoginView
    },
    props: {
      msg: String
    },
    computed: {
      ...mapState(['cartIds']),
    },
    methods: {
        handleSearchClick() {
            if (this.$store.state.login) {
                alert('请先登录');
                return;
            }
            this.goToSearch();
        },
        goToSearch(courseId = '') {
            this.$router.push({ 
                name: 'SearchView',
                query: { subjectId: courseId }
            });
        },
        goToCart() {
            if (this.$store.state.login) {
                alert('请先登录');
                return;
            }
            this.$router.push({ name: 'CartView' });
        }
    },
    async created() {
        // 假设从和 MainSearch 同样的接口获取课程数据
        const { getList } = await import('@/api/request');
        Promise.all([
            getList('free'),
            getList('boutique'),
            getList('discount')
        ])
        .then(([freeRes, boutiqueRes, discountRes]) => {
            const boutiqueCourses = (boutiqueRes.rows || []).map(course => ({
                ...course,
                isBoutique: 1
            }));
            let allCourses = [
                ...(freeRes.rows || []),
                ...boutiqueCourses,
                ...(discountRes.rows || [])
            ];

            const courseIdSet = new Set();
            allCourses = allCourses.filter(course => {
                if (courseIdSet.has(course.courseId)) {
                    return false;
                }
                courseIdSet.add(course.courseId);
                return true;
            });

            this.allCourses = allCourses;
        });
    }
}
</script>

<style scoped lang="scss">
header {
    width: 100%;
    height: 295px;
    background: no-repeat url(https://course.myhope365.com/img/index-top-bg.564836d0.png);
    background-size: 100% 100%;
    margin-bottom: 80px; // 添加这行，确保不会裁剪下拉菜单
}
.topOne {
    width: 1160px;
    height: 168px;
    margin: 0 auto;
}
.topOne > img {
    width: 212px;
    margin: 50px 474px 50px;
}
.topTwo {
    height: 80px;
}
.header-container {
    width: 1160px;
    height: 80px;
    margin: 0 auto;
    display: flex;
}
.header-nav {
    width: 399px;
    height: 30px;
    margin-left: 40px;
    margin-top: 20px;
    float: left;
}
.header-nav > ul > li > a {
    color: #fff;
    font-weight: 600;
    font-size: 16px;
}
.header-nav > ul > li {
    float: left;
    margin: 0 25px 0 0;
}
.search {
    width: 300px;
    height: 38px;
    margin-left: 320px;
    margin-top: 20px;
    display: flex;
}
.search > input {
    width: 229px;
    height: 36px;
    float: left;
    margin-bottom: 0;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    border: 1px solid #d9d9d9;
    font-size: 16px;
    color: rgba(0, 0, 0, .65);
    padding: 6px 11px;
}
.search > .bigButton {
    width: 52px;
    height: 38px;
    border-color: #d9d9d9;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}
.search >.bigButton > button {
    width: 52px;
    height: 36px;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    border: 1px solid yellow;
    border-color: #d9d9d9;
    background-color: #62dde1;
    cursor: pointer;
}
.login-container {
    width: 170px;
    height: 80px;
}
.login-container > .login-box {
    width: 170px;
    height: 36px;
    margin-top: 20px;
    display: flex;
}
.login-container >.login-box > .white-box {
    width: 36px;
    height: 36px;
    background: #fff;
    border-radius: 50%;
    float: left;
    margin: 0 20px;
    cursor: pointer;
}
.login-container >.login-box >.white-box > .ant-badge {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-size: 14px;
    position: relative;
    display: inline-block;
    color: unset;
    line-height: 1;
}
.login-container >.login-box >.white-box >.ant-badge > img {
    margin-top: 8px;
    margin-left: 8px;
}
.login-container > .login-box > .user-avatar {
    position: relative;
}
.login-container >.login-box >.user-avatar >.open-minded {
    position: absolute;
    font-size: 10px;
    top: -50px;
    width: 155px;
    height: 41px;
    text-align: center;
    line-height: 30px;
    font-weight: 500;
    background: url();
    background-size: 100%;
    color: #fff;
}
.login-container >.login-box >.user-avatar >.login-or-register {
    width: 94px;
    height: 30px;
    background: #fff;
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .23);
    border-radius: 15px;
    font-weight: 600;
    font-size: 15px;
    text-align: center;
    line-height: 30px;
}
.ant-dropdown-menu {
    position: absolute;
    margin: 0;
    padding: 4px 0;
    text-align: left;
    list-style-type: none;
    background-color: #fff;
    background-clip: padding-box;
    border-radius: 2px;
    outline: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
    display: none;
    z-index: 1000; // 确保下拉菜单显示在最上层
    left: 0;
    top: 100%;
}
.ant-dropdown-menu-item, .ant-dropdown-menu-submenu-title {
    clear: both;
    margin: 0;
    padding: 5px 12px;
    color: rgba(0, 0, 0, .65);
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
    white-space: nowrap;
    cursor: pointer;
    transition: all .3s;
}
.ant-dropdown-menu-item:hover {
    background-color: #f5f5f5;
}
.dropdown-trigger:hover + .ant-dropdown-menu,
.ant-dropdown-menu:hover {
    display: block;
}
.header-nav ul li {
    position: relative;
}
  </style>
  